import React from 'react'
// ===================================================================== antd
// import { ImportOutlined } from '@ant-design/icons'
// ===================================================================== Temp
import TableModal from '#cpt/temp/TableModal'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== private component
const Button = $Lazy.load(()=>import('@antd/button'))
const Import 	= $Lazy.load(()=>import('#private/common/import'))
const message 	= $Lazy.file(()=>import('@antd/message'))
const confirm 	= $Lazy.file(()=>import('@antd/confirm'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		selectedKeys:[],
		selectedRows: [],
		query: {}
	}
	
	model = {}
	
	
	open = (query) => {
		this.setState({query})
		this.modal.open()
	}
	// paging
	fetch = ({ data }) => {
		if($fn.hasArray(data)){
			data.forEach((v,i) => v.index = i)
			this.setState({ data })
		}else{
			this.setState({ data:[] })
			message.then(f => f.warning('导入数据为空'))
		}
	}
	
	// 表单
	cols = [
		{ title: '条码', 			dataIndex: 'spec_code', 	...$fn.table.spec_code },
		{ title: '自然项目(导入)', 	dataIndex: 'im_parent_kind_name', 	...$fn.table.time },
		{ title: '自然项目(lis)', 	dataIndex: 'ts_parent_kind_name', 	width:200 },
		{ title: '项目名称(导入)', 	dataIndex: 'im_kind_name', 	width:200 },
		{ title: '项目名称(lis)', 	dataIndex: 'ts_kind_name', 	width:200 },
		{ title: '结果(导入)', 		dataIndex: 'result', 		width:200  },
		{ title: '结果(lis)', 		dataIndex: 'result', 		width:200  },
	]
	
	render(){
		const { data } = this.state
		return TableModal.call(this,{ 
			title	: '上传结果', 
			width	: '80%', 
			height	: '80%', 
			okText	: '确认上传',
			prefix	: (
				<div className='xplr mb10 fxmj'>
					<div>
						<Import api='lis-outsourcing-company/importData' param={{importType:2,status:this.state.query.status}} onOk={this.fetch} btnConfig={{size:'middle'}} />
						<Button size='middle' className='ml10' ghost label='下载导入模板' onClick={()=>$fn.pushRoot(this,'/system-settings/import-template?skip=1')} />
					</div>
					<p className='f12 g6 ml20'>以下红色数据，未能在检测中心匹配到相应数据，请检测上传文件中 “项目名称” 是否正确。如果点击确认上传，以下红色数据将会被忽略。</p>
				</div>
			),
			close : () => {
				$fn.clearKeys.call(this)
				this.setState({ data: [] })
			},
			onOk	: (keys, rows) => {
				let forms = []
				if($fn.hasArray(keys)){
					forms = rows
				}else{
					forms = data.filter( ({checked_enabled}) => +checked_enabled === 1)
					if(!$fn.hasArray(forms)){
						return message.then(f => f.warning('未能在检测中心匹配到相应数据'))
					}
				}
				confirm.then(f=>{
					f({
						msg:`此次将上传【${forms.length}】条数据，是否确认操作？`,
						onOk: close => {
							window.$http.submit(this,'result-unit-item/updateall', { param:{ forms: JSON.stringify(forms) }}).then(data=>{
								message.then(f => f.success('上传成功'))
								close()
							})
						}
					})
				})
			},
			hasOkDisabled:false,
			OkDisabled: data.length > 0,
			table: {
				width:1200,
				isIndex:true,
				suffix: <div className='f12 g9 ml20'>如果不勾选，将上传所有数据</div>,
				onDisabled: ({ checked_enabled }) => ( { disabled: +checked_enabled !== 1 }),
				onRowClass: ({ checked_enabled }) => {
					if(+checked_enabled !== 1){	// 未能在检测中心匹配到相应数据
						return 'row-e24747'
					}
				}
			}
		})
	}
}

export default Index